<template>
  <div class="home">
    <van-nav-bar title="小U商城" />
    <div class="box">
      <!-- <img :src="require('../../assets/img/logo2.png')"> -->
      <img :src="require('../../assets/img/logo.png')" alt="" />
      <van-search placeholder="请输入搜索关键词" />
      <van-icon name="shop" />
      <!-- 一级分类 -->
      <van-tabs>
        <van-tab
          v-for="(item, index) in firstCate"
          :key="index"
          :title="item.catename"
        >
        </van-tab>
      </van-tabs>
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(obj, index) in bannerImg" :key="index">
        <img style="width: 100vw" :src="'http://localhost:3000' + obj.img" />
      </van-swipe-item>
    </van-swipe>
    <!--  -->
    <div class="fenlei">
      <div v-for="(item, index) in fenlei" :key="index">
        <img style="width: 40px; dispaly: block" :src="item.img" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!-- 限时秒杀 -->
    <div class="content">
      <!-- 限时 -->
      <div class="top clearfix">
        <div class="left fl">
          <div class="title clearfix">
            <h2 class="fl">限时秒杀</h2>
            <a href="#" class="fr"
              >查看更多<span class="iconfont icon-jiantouyou"></span
            ></a>
          </div>
          <!-- 倒计时 -->
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="right fl">
          <div class="riTop">
            <h2>品牌上新</h2>
            <p>9点整，抢大牌</p>
            <a href="#"
              >疯抢红包 <span class="iconfont icon-jiantouyou"></span
            ></a>
          </div>
          <div class="riBot">
            <h2>日用好物</h2>
            <p>愿君多采撷</p>
            <a href="#"
              >塞满奖券 <span class="iconfont icon-jiantouyou"></span
            ></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="biaoshi">
      <van-tabs>
        <van-tab
          color="#ee0a24"
          :title="item"
          v-for="(item, index) in recArr"
          :key="index"
        >
          <van-card
            v-for="item in hortgoods[index] ? hortgoods[index].content : []"
            :key="item.id"
            :tag="recArr[index]"
            :price="item.price"
            :title="item.goodsname"
            :thumb="$imgHost + item.img"
            :origin-price="item.market_price"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ic1 from "../../assets/img/ic1.png";
import ic2 from "../../assets/img/ic2.png";
import ic3 from "../../assets/img/ic3.png";
import ic4 from "../../assets/img/ic4.png";
import ic5 from "../../assets/img/ic5.png";
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import { gethortgoods, getBanners, getFirstCate,checktoken } from "../../request/api.js";
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      recArr: ["热门推荐", "上新推荐", "所有商品"],
      hortgoods: [],
      bannerImg: [],
      firstCate: [],
      fenlei: [
        { name: "限时秒杀", img: ic1 },
        { name: "畅销商品", img: ic2 },
        { name: "品质大牌", img: ic3 },
        { name: "小U自营", img: ic4 },
        { name: "积分商城", img: ic5 },
      ],
    };
  },
  mounted() {
    //获取商品信息
    gethortgoods().then((d) => {
      // console.log(d);
      this.hortgoods = d.data.list;
    });
    //获取轮播图
    getBanners().then((d) => {
      // console.log(d);
      this.bannerImg = d.data.list;
    });
    //获取一级分类
    getFirstCate().then((d) => {
      this.firstCate = d.data.list;
    });
  },
};
</script>

<style scoped>
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #5A7D37;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: #5A7D37;
    border-radius: 5px;
  }
.van-icon-shop:before {
  content: "\e71a";
  color: white;
  line-height: 29px;
  font-size: 27px;
  margin-left: 10px;
}
.van-count-down {
  color: gray;
  font-weight: bold;
  margin-top: 20px;
  font-size: 19px;
}
.fenlei {
  display: flex;
}
.fenlei > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fenlei > div span {
  margin: 10px 0;
}
.home {
  height: 90vh;
  overflow: scroll;
}

.van-card {
  margin: 10px 15px;
  box-shadow: 3px 5px 5px gainsboro;
  border: 1px solid gainsboro;
}
::v-deep .van-nav-bar__content {
  position: fixed;
  background-color: #ff6041;
  top: 0;
  left: 0;
  width: 100vw;
}
/*  placeholder 修改样式*/
/* ::v-deep .van-field__control::placeholder{
  color: #ff8917;
} */

::v-deep .van-nav-bar__title {
  color: white;
  font-weight: bold;
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  background-color: transparent;
}
::v-deep .van-tabs__wrap--scrollable .van-tab {
  color: white;
  font-weight: bold;
}
.box {
  /* background-color: #ff6041; */
  background-image: linear-gradient(to bottom, #ff6345, #ff887d);
  margin-top: 46px;
}
.box img {
  width: 120px;
  margin-left: 27px;
  margin-right: 20px;
}
::v-deep .van-search {
  padding: 0;
  display: inline-block;
  border-radius: 10px;
}
::v-deep .van-search__content {
  border-radius: 5px;
  width: 150px;
}
::v-deep .active {
  background-color: red;
}
::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #ff8917;
}
::v-deep .van-tab {
  color: #fea600;
}
::v-deep .biaoshi .van-tab--active {
  background-color: #fea600;
  color: white;
  font-weight: bold;
  border-radius: 5px;
}
::v-deep .biaoshi .van-tabs__line {
  display: none;
}
::v-deep .van-tabs__wrap .van-tabs__line {
  /* display: none; */
  background-color: white;
  z-index: 0;
}
.van-swipe {
  margin: 8px 15px;
}

/*  */
.content {
  padding: 0.2rem;
  background-color: #f2f2f2;
}
/* 限时 */
.content .top {
  display: flex; /* 设置为弹性盒子 */
}
.content .top > div {
  flex: 1; /* 平均分配空间 */
}
.content .top .left {
  margin-right: 0.05rem;
  background: url(../../assets/img/fen1.jpg) no-repeat right bottom/cover;
  padding: 0 0.3rem 0 0.2rem;
}
.content .top .right {
  margin-left: 5px;
  display: flex; /* 设置为弹性盒子 */
  flex-direction: column; /* 垂直布局 */
}
.content .top .right > div {
  flex: 1; /* 平均分配空间 */
}
.content .top .right .riTop {
  background: url(../../assets/img/fen2.jpg) no-repeat right bottom/cover; /*  */
  margin-bottom: 10px;
}
.content .top .right .riBot {
  background: url(../../assets/img/fen3.jpg) no-repeat right bottom/cover;
}

.content .top h2 {
  font: 17px/17px "微软雅黑";
  color: #85a624;
  padding-top: 12px;
}
.content .top .title a {
  font: 17px/17px "微软雅黑";
  color: #40403f;
  padding-top: 12px;
}
.content .top .title a span {
  display: inline-block;
  margin-left: 7px;
  font: 11px/19px "微软雅黑";
}
.content .top p {
  font: 13px/30px "微软雅黑";
  color: #b6ce82;
  margin-top: 2px;
}
.content .top .time {
  margin-top: 10px;
  line-height: 36px;
}
.content .top .time em {
  margin: 3px;
}
.content .top .time span {
  display: inline-block;
  font: 18px/36px "微软雅黑";
  color: #fff;
  font-weight: bold;
  background: linear-gradient(to bottom, #87a845, #b0cb79);
  padding: 5px;
  border-radius: 2px;
}
.content .top .right .riTop,
.content .top .right .riBot {
  padding: 0 0 0 2px;
}
.content .top .right .riTop h2 {
  color: #ff6040;
}
.content .top .right .riBot h2 {
  color: #b042ff;
}

.content .top .right .riTop p {
  color: #ff9580;
}
.content .top .right .riBot p {
  color: #ca80ff;
}
.content .top .right a {
  display: inline-block;
  min-width: 1.2rem;
  font: 18px/27px "微软雅黑";
  color: #fff;
  background: linear-gradient(to bottom, #ff6040, #ff897f);
  text-indent: 11px;
  padding-right: 12px;
  /* border-radius: .04rem .2rem .2rem .04rem; */
  border-top-right-radius: 45%;
  border-bottom-right-radius: 45%;
  white-space: nowrap;
}
.content .top .right .riBot a {
  background: linear-gradient(to bottom, #b042ff, #f58bff);
}
/* 双11 */
.content .douTab {
  background-color: #fff;
  margin-top: 0.2rem;
  padding-bottom: 0.21rem;
}
.content .douTab .title {
  display: flex; /* 弹性盒子 
    */
  overflow: hidden;
}
.content .douTab .title li {
  /* flex: 1; */
  float: left;
  width: calc(100% / 2); /* 另一种布局  */
  text-align: center;
  font: 0.2rem/0.81rem "微软雅黑";
}
.content .douTab .title .active {
  color: #ff6040;
}
.content .douTabCon {
  margin: 0 0.2rem;
}
.content .douTabCon li {
  float: left;
  /* max-width: 1.6rem; */
  width: calc((100% - 0.3rem) / 4);
  margin-right: 0.1rem;
}
.content .douTabCon li:last-child {
  margin-right: 0;
}
.content .douTabCon li .pic {
  height: 1.6rem;
  overflow: hidden;
}
.content .douTabCon li .pic img {
  width: 100%;
  height: auto;
}
.content .douTabCon li p {
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: clip; /* 裁剪 */
  line-height: 0.53rem;
  font: 0.18rem/0.53rem "微软雅黑";
  color: #333;
  text-align: center;
}
</style>